@import "~antd/lib/style/themes/default.less";
@import "../../utils/utils.less";
@customScroll: {
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width     : 6px;
    height    : 6px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background   : transparent;
    border-radius: 4px;
  }

  &:hover::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 53%, 0.4);
  }

  &:hover::-webkit-scrollbar-track {
    background: hsla(0, 0%, 53%, 0.1);
  }
}
.cardList {
  margin-bottom: -24px;

  .card {
    :global {
      .ant-card-meta-title {
        margin-bottom: 2px;

        &>a {
          color: @heading-color;
        }
      }

      .ant-card-actions {
        background: #f7f9fa;
      }

      .ant-card-body:hover {
        .ant-card-meta-title>a {
          color: @primary-color;
        }
      }
    }
  }

  .cards {
    :global {
      .ant-card-actions>li>span {
        width: 100%;
      }

      .ant-card-meta-title {
        margin-bottom: 2px;

        &>a {
          color: @heading-color;
        }
      }

      .ant-card-actions {
        background: #f7f9fa;
      }

      .ant-card-body:hover {
        .ant-card-meta-title>a {
          color: @primary-color;
        }
      }
    }
  }
}

.extraImg {
  margin-top: -60px;
  text-align: center;
  width     : 195px;

  img {
    width: 100%;
  }
}

.newButton {
  background-color: #fff;
  border-color    : @border-color-base;
  border-radius   : @border-radius-sm;
  color           : @text-color-secondary;
  width           : 100%;
  height          : 188px;
}

.CardMeta {
  :global {
    .ant-card-meta-avatar {
      padding-right: 0 !important;
    }
  }
}

.cardTitle {
  color          : #1890ff;
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.cardTitle span:nth-child(1) {
  display      : inline-block;
  max-width    : 100px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.cardVersion {
  max-width    : 100px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.memoryStyle {
  height     : 26px;
  line-height: 26px;
  display    : flex;
  align-items: center;

  &>span {
    width  : 48px;
    display: inline-block;
  }

  &>a {
    width        : 100%;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
  }
}

.shareNameStyle {
  height     : 26px;
  line-height: 26px;
  display    : flex;
  align-items: center;

  &>span {
    width  : 58px;
    display: inline-block;
  }

  &>a {
    width        : 100%;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
  }
}

.cardVersionTagStyle {
  height     : 20px;
  line-height: 20px;
  text-align : center;
}

.cardVersionListStyle {
  overflow-x: hidden;
}

.cardVersionStyle {
  display    : flex;
  height     : 26px;
  line-height: 26px;

  &>span {
    width  : 46px;
    display: inline-block;
  }

  .overScroll::-webkit-scrollbar {
    width           : 6px;
    height          : 12px;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道
     内阴影+圆角*/
  .overScroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius     : 10px;
    background-color  : #F5F5F5;
  }

  /*定义滑块
     内阴影+圆角*/
  .overScroll::-webkit-scrollbar-thumb {
    border-radius     : 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color  : #555;
  }



  .overScroll {
    width: 67%;

    &>div {
      height   : 26px;
      width    : 100%;
      display  : flex;
      flex-wrap: wrap;
      @customScroll();
      :global {
        .ant-tag {
          padding      : 0 5px !important;
          height       : 20px;
          margin-top   : 3px;
          margin-bottom: 3px;
        }
      }

      &>div {
        white-space  : nowrap;
        overflow     : hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

  .cardsMetas {
    height: 112px;
    @customScroll();
  }

  .cardAvatar {
    width        : 48px;
    height       : 48px;
    border-radius: 48px;
  }

  .cardDescription {
    .textOverflowMulti();
  }

  .pageHeaderContent {
    position: relative;
  }

  .contentLink {
    margin-top: 16px;

    a {
      margin-right: 32px;

      img {
        width: 24px;
      }
    }

    img {
      vertical-align: middle;
      margin-right  : 8px;
    }
  }

  @media screen and (max-width: @screen-lg) {
    .contentLink {
      a {
        margin-right: 16px;
      }
    }
  }

  @media screen and (max-width: @screen-md) {
    .extraImg {
      display: none;
    }
  }

  @media screen and (max-width: @screen-sm) {
    .pageHeaderContent {
      padding-bottom: 30px;
    }

    .contentLink {
      position: absolute;
      left    : 0;
      bottom  : -4px;
      width   : 1000px;

      a {
        margin-right: 16px;
      }

      img {
        margin-right: 4px;
      }
    }
  }

  .configGroup {
    span {
      margin-right: 16px;
      display     : inline-block
    }
  }

  @import "~antd/lib/style/themes/default.less";

  .headerList {
    margin-bottom: 4px;
  }

  .tabsCard {
    margin-bottom: 24px;

    :global {
      .ant-card-head {
        padding: 0 16px;
      }
    }
  }

  .noData {
    color      : @disabled-color;
    text-align : center;
    line-height: 64px;
    font-size  : 16px;

    i {
      font-size   : 24px;
      margin-right: 16px;
      position    : relative;
      top         : 3px;
    }
  }

  .heading {
    color    : @heading-color;
    font-size: 20px;
  }

  .stepDescription {
    font-size: 14px;
    position : relative;
    left     : 38px;

    &>div {
      margin-top   : 8px;
      margin-bottom: 4px;
    }
  }

  .textSecondary {
    color: @text-color-secondary;
  }

  @media screen and (max-width: @screen-sm) {
    .stepDescription {
      left: 8px;
    }
  }
